<template>
  <navbarback></navbarback>
    <!-- 头部 -->
    <view class="homeDetail">
    <view class="Hdetail-header">
      <view class="Hdetail-search">
       <input
          class="Hdetail-input"
          type="text"
          placeholder="请输入患者姓名/身份证号/手机号"
          confirm-type="search"
          v-model="Listform.text"
          @input="handleSearch"
        />
      </view>
    </view>
    <!-- 列表 -->
    <view class="Hdetail-body">
      <scroll-view class="Hdetail-patient-list" scroll-y :show-scrollbar="false">
        <view class="Hdetail-patient-box">
          <view @tap="handleDetailTap(homeItem)" class="Hdetail-patient-item" v-for="(homeItem, index) in HomeVList" :key="index">
            <view class="Hdetail-patient-item-header"></view>
            <view
              class="firstrow-item"
              style="font-weight: bold; font-size: 14rpx; padding: 0 14rpx"
              >姓名：{{ homeItem.name }}
            </view>
            <view class="Hdetail-patient-item-firstrow">
              <view class="firstrow-item">年龄：{{ homeItem.age }}</view>
              <view
                style="
                  font-size: 11rpx;
                  border-radius: 2rpx;
                  color: #ff0000;
                  border: 1rpx solid #ff0000;
                "
                >已过期</view
              >
            </view>
            <view class="Hdetail-patient-item-firstrow">
              <view class="firstrow-item" style="width: 50rpx">性别：{{ homeItem.sex }}</view>
              <view class="firstrow-item" style="flex: 1; width: 150rpx"
                >人群：{{ homeItem.disease }}
              </view>
            </view>
            <view class="Hdetail-patient-item-secondrow">
              <view class="firstrow-item">身份证：{{ homeItem.idNumber }}</view>
            </view>
            <view class="Hdetail-patient-item-secondrow">
              <view class="firstrow-item">地址：{{ homeItem.address }}</view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    </view>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import { computed } from 'vue'
import { onLoad, onShow, onTabItemTap } from '@dcloudio/uni-app'
import { http } from '@/utils/http'
import navbarback from '@/component/navbarback2.vue'

const Listform = ref({
  text: ''
});

const HomeVList = ref([]);

const getList = (keyword) => {
  http({
    url:
      `/index/getAllDue?doctorId=1&keyword=${keyword}`,
    method: 'GET',
  }).then(function(response: any) {
       HomeVList.value = response.data.map(item => ({
              id: item.id,
              name: item.name,
              age: item.age,
              sex: item.sex,
              disease: item.disease,
              idNumber: item.idNumber,
              address: item.address,
              phoneNumber: item.phoneNumber
            }));
      //console.log(response);
  });

};

const todetail = (item: any) => {
  uni.navigateTo({ url: `/pages/archivuedetail/archivuedetail?params=${JSON.stringify(item)}` })
}
const handleDetailTap = (item: any) => {
  todetail(item);
}

const handleSearch = () => {
  getList(Listform.value.text);
};

onLoad(() => {
  getList(Listform.value.text);
})
</script>

<style scoped lang="scss">

.homeDetail {
  background-color: #f4f4f4;
}

.Hdetail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15rpx;
  padding: 0 15rpx;
  width: 100%;
  height: 45rpx;
  background-color: #f4f4f4;
  .Hdetail-search {
    display: flex;
    align-items: center;
    height: 32rpx;
    width: 100%;
    padding: 0 20rpx;
    background-color: #fff;
    border-radius: 5rpx;

    .Hdetail-input {
      flex: 1;
      border: none;
      outline: none;
      background-color: transparent;
      width: 100%;
      height: 100%;
    }

  }

}
.Hdetail-body {
  width: 100%;
  height: calc(100vh - 105rpx);
  margin-top: 10rpx;
  overflow: auto;
  padding: 0 15rpx;
  .Hdetail-patient-list {
    width: 100%;
    .Hdetail-patient-box {
      display: flex;
      flex-wrap: wrap;
      .Hdetail-patient-item {
        background-color: #fff;
        height: 120rpx;
        width: 200rpx;
        padding: 0rpx 0;
        border-radius: 5rpx;
        margin: 5rpx 2rpx;
        .Hdetail-patient-item-header {
          width: 100%;
          height: 8rpx;
          background-color: #06d9f5;
          background: #fff radial-gradient(#06dbf5, #02abf3);
          border-radius: 5rpx;
        }
        .Hdetail-patient-item-firstrow {
          margin-top: 6rpx;
          padding: 0 14rpx;
          display: flex;
          justify-content: space-between;
          .firstrow-item {
            display: flex;
            color: #61666d;
            font-size: 11rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            line-clamp: 1;
            -webkit-box-orient: vertical;
            .patient-tag {
              width: 55rpx;
              border: 1rpx solid #61666d;
              padding: 0 3rpx;
              border-radius: 2rpx;
              height: 15rpx;
              overflow: hidden;
            }
          }
        }
        .Hdetail-patient-item-secondrow {
          width: 100%;
          margin-top: 6rpx;
          padding: 0 14rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          line-clamp: 1;
          -webkit-box-orient: vertical;
          .firstrow-item {
            color: #61666d;
            font-size: 11rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            line-clamp: 1;
            -webkit-box-orient: vertical;
          }
        }
      }
      .Hdetail-patient-item-text {
        font-size: 12rpx;
        color: #333333;
      }
    }
  }
}

</style>
